<script setup>
import { ref } from 'vue'
import RoleSave from './dialog/save'
import columns from '@/config/columns/role'
import ConfirmButton from '@/components/plug-in/confirm-button'
import ConfigurePermissions from './dialog/configure-permissions'

let tablePros = ref()
let saveForm = ref({})
let saveShow = ref(false)

let checked = ref([])
let roleId = ref(0)
let permissionsShow = ref(false)

const saveDataShow = (record) => {
  saveForm.value = record
  saveShow.value = true
}
const setPermissionsShow = (record) => {
  checked.value = record.NodeID
  roleId.value = record.RoleID
  permissionsShow.value = true
}
const reload = () => {
  tablePros.value.reload()
}

</script>

<template>
  <div class="wrapper">
    <role-save :form="saveForm" v-model:visible="saveShow" @complete="reload"/>
    <configure-permissions :role-id="roleId" :checked="checked" v-model:visible="permissionsShow" @complete="reload"/>

    <table-pro ref="tablePros" url="/role" rowKey="UserID" :columns="columns">
      <template v-slot:search>
        <icon-btn @click="saveDataShow(false)"></icon-btn>
      </template>
      <template v-slot="{ column, record}">
        <template v-if="column.dataIndex === 'Action'">
          <link-btn title="编辑" @click="saveDataShow(record)"></link-btn>
          <link-btn title="权限分配" @click="setPermissionsShow(record)"></link-btn>
          <confirm-button
              :status="Number(record.RoleStatus)"
              :params="{ID: record.RoleID}"
              request-path="/role/status"
              @request-success="reload()"/>
        </template>
      </template>
    </table-pro>
  </div>
</template>
